<template>
<!-- 我的主页 gpd -->
   <div class="MyHomePage">
      <div class="my_home_page_div1">
        <!-- 导航栏 -->
        <el-menu  default-active="/MyHomePage" router class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="/"><i class="el-icon-s-home"></i></el-menu-item>
            <el-menu-item>目的地攻略</el-menu-item>
            <el-menu-item >游记</el-menu-item>
            <el-menu-item index="/Chat">问答</el-menu-item>
            <el-menu-item >当地向导</el-menu-item>
            <el-menu-item index="/MyHomePage">我的主页</el-menu-item>
        </el-menu>
        <!-- 个人信息 -->
            <div class="myHomePage_div2">
                <img src="../../img/memeber-toppic.jpg" class="myHome_img1">
                <img src="../../img/Z80o180000013ulur1D76.jpg" class="myHome_img2">
                <div class="myHome_div3">
                    <div class="myHome_div4">
                        <p class="myHomePage_p1">M46****6146</p>
                        <i class="el-icon-s-custom" style="color:#409EFF;margin-top:20px;font-size:14px;float:left;"></i>
                        <span class="myHomePage_span1">2022-07-05加入</span>
                        <router-link to="/MyHomePage"><span class="myHomePage_span2">编辑个人资料></span></router-link>
                        <router-link to="/MyHomePage"><p class="myHomePage_p2"><i class="el-icon-s-tools" style="margin-right:4px;color:rgb(126, 122, 118)"></i>域名设置</p></router-link>
                        <router-link to="/MyHomePage"><p class="myHomePage_p3"><i class="el-icon-message" style="margin-right:4px;color:rgb(126, 122, 118)"></i>消息设置</p></router-link>
                    </div>
                    <div class="myHome_div5">
                        <p class="myHomePage_span3">0</p>
                        <p class="myHomePage_span4">0</p>
                        <p class="myHomePage_p4">关注</p>
                        <p class="myHomePage_p5">粉丝</p>
                    </div>
                </div>
            </div>
            <!-- 查看审批失败弹窗 -->
            <el-dialog title="审批失败原因" :visible.sync="viewFailureReasonVisible" width="60%" :destroy-on-close="true" style="failureReason_dialog">
                <el-form :model="failureReason" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="失败原因">
                        <el-input v-model="tourNoteForm.failureReason" :disabled="true"></el-input>
                    </el-form-item>
                </el-form>
            </el-dialog>
			<!-- 修改游记弹窗 -->
			<el-dialog  title="编辑富文本" :visible.sync="dialogFormVisibleEdit">
				<el-form :model="tourNoteForm" label-width="100px" @close="resetForms('ruleForm')" :rules="rules" ref="tourNoteForm">
					<el-form-item label="输入标题：" :label-width="formLabelWidthTextArea" style="margin-top:120px;" prop="title">
						<el-input 
							placeholder="涵盖目的地、主题、旅游亮点等更吸引人"
							v-model="tourNoteForm.title"
							maxlength="40" 
							show-word-limit
							style="width:450px"
							>
						</el-input>
					</el-form-item>
					<el-form-item label="封面图设置：" :label-width="formLabelWidthAuthor" class="tourNoteImage">  
						<div class="yangshi">
							<el-upload class="avatar-uploader" action="" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
							<img v-if="imageUrl" :src="imageUrl" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
						</div>
					</el-form-item>
                    <el-form-item label="景区城市" :label-width="formLabelWidth" prop="cityId">
                        <el-select v-model="tourNoteForm.provinceId" placeholder="请选择省" @change="getNameByPidCityEdit()">
                            <el-option
                            v-for="item in provincess"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                        <!-- 市下拉框 -->
                        <el-select v-model="tourNoteForm.cityId" placeholder="请选择市" >
                            <el-option
                            v-for="item in cityss"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
					<div class="body">
						<quill-editor ref="text" v-model="tourNoteForm.textContent" class="editor" :options="editorOption"/>
					</div>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
					<el-button type="primary" @click="ediTraveNotesById('ruleForm')">确 定</el-button>
				</div>
			</el-dialog>	
            <div class="myHomePage_div6">
                <div class="myHomePage_div7">
                    <el-tabs style="width:100%;height:100%" v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane style="height:600px" label="用户管理" name="first">
                            <!-- 地图容器 -->
                            <div id='my_home_page_map'></div>
                        </el-tab-pane>
                        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                        <el-tab-pane label="游记" name="travels">
                            <template>
                                <el-table :data="TraveNotesData" border style="width: 100%;height:100%">
                                    <el-table-column prop="title" label="标题" fixed width="440">
                                    </el-table-column>
                                    <el-table-column width="100" label="游记状态" align="center">
                                        <template slot-scope="scope">
                                            <el-tag type="success" effect="dark" v-if="scope.row.releaseTypeId==1">审批中</el-tag>
                                            <el-tag type="danger" effect="dark" v-if="scope.row.releaseTypeId==2" @click="failureReason(scope.row)">审批失败</el-tag>
                                            <el-tag  effect="dark" v-if="scope.row.releaseTypeId==3">审批成功</el-tag>
                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="openPrivate" label="发布">
                                        <template slot-scope="scope">
                                           <el-switch @change="openPrivate(scope.row)" v-model="scope.row.openPrivate" active-value="true" inactuive-value="false"></el-switch>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                    prop="views"
                                    label="浏览量"
                                    width="100">
                                    </el-table-column>
                                    <el-table-column
                                        prop="createTime"
                                        label="日期"
                                        width="160">
                                    </el-table-column>
                                    <el-table-column fixed="right" label="操作" width="180">
										<template slot-scope="scope">
											<el-button type="text" @click="tourNoteEdit(scope.row)" size="small"><i class="el-icon-edit"></i>编辑
											</el-button>
											<el-button type="text" @click="deleteTourNoteById(scope.row.id)" size="small"><i class="el-icon-delete"></i>删除
											</el-button>
										</template>
									</el-table-column>
                                </el-table>
                            </template>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="myHomePage_div8">
                    <div class="myHomePage_div9">
                        <el-button type="danger" @click="writeTourNote()" style="width:130px;font-size:20px;margin-top:16px;float:left;"><i class="el-icon-edit"></i>写游记</el-button>
                        <el-button type="primary" style="width:130px;font-size:20px;margin-top:16px;float:left;"><i class="el-icon-info"></i>写点评</el-button>
                        <el-button style="width:130px;font-size:20px;margin-top:16px;float:left;margin-left:0px;"><i class="el-icon-question"></i>提问题</el-button>
                    </div>
                    <div class="myHomePage_div10">
                        <p style="font-size:20px;">我最近的收藏</p>
                        <p style="font-size:12px;margin-top:20px;">还没有收藏</p>
                    </div>
                    <div class="myHomePage_div10">
                        <p style="font-size:20px;">我的关注</p>
                        <p style="font-size:12px;margin-top:20px;">没有关注任何人</p>
                    </div>
                 </div>
            </div>
      </div>
   </div>
</template>

<script>
import icon from '@/assets/marker-icon.png'
const axios = require('axios')
export default {
   name:'MyHomePage',
    data() {
      return {
        dialogMyTrend:false,
        dialogNetizenTrends:false,
        activeName: 'first',
        // 查看审批失败原因弹窗默认隐藏
        viewFailureReasonVisible: false,
		// 游记全查集合
		TraveNotesData:[],
        // 存放是 数组
        citys: [],
        // 存放省 数组
        provinces: [],
        // 存放省 数组
        provincess: [],
        // 修改时查询市数组
        cityss: [], 
		// 用户名称
		userName:'',
        // 用户id
		userId:'',
        // 存放公开还是私密数据
        openPrivateList:'',
		// 修改游记数据弹窗
		dialogFormVisibleEdit: false, 
		// 图片对象
		imageFile: File,
		// 存放图片
		imageUrl: '',
		// 游记修改集合
		tourNoteForm:{ 
			id: '',
			title:'',
			author:'',
			textContent:'',
			delFlag: '',
			views: '',
			avatarId: '',
            provinceId: '',
            // failureReason:'',
		},
		editorOption: {},
		// 标题输入框长度
		formLabelWidthTextArea: '120px', 
		 // 作者输入框长度
		formLabelWidthAuthor: '120px',
        formLabelWidth:'120px',
        // 县
        city: '',
        // 用户头像id
        userAvatarId:'',
        // Pid
        pId: '',
        cityPid: '',
		// 校验规则
		rules: {
			title: [
				{ required: true, message: '请填写您的标题', trigger: 'blur' },
			],
		}

      };
    },
    mounted () {
        // 从头部获取用户头像id
		this.userAvatarId = window.sessionStorage.getItem('avatarId')
        this.MyTrend()
        // 渲染地图
        this.MapShow()
        // 展示旅游足迹
        this.getScenicListByOrder()
		// 获取游记详细数据
		this.getTourNoteAlls()
        // 根据pid查询省信息
        this.getNameByPidMoren()
    },
    methods: {
        // 点击审批失败时触发弹窗
        failureReason(row){
            this.tourNoteForm = row
            this.viewFailureReasonVisible = true
        },
        // 点击切换公开还是私密是触发
        openPrivate (row) {
            this.openPrivateList = row
            this.editForum()
        },
        // 修改发布滑块信息
        editForum () {
            axios.put('http://127.0.0.1:8082/tourNote/updateOpenPrivate', this.openPrivateList).then((res) => {
            if (res.data.obj) {
                this.getTourNoteAlls()
                if (this.openPrivateList.openPrivate === 'true') {
                  this.message('发布成功', 'success')
                } else {
                    this.message('取消发布', 'success')
                }
                this.forumData = {}
            } else {
                this.getTourNoteAlls()
                this.message('请先等待通过审核，在进行操作', 'warning')
            }
            })
        },
        // 修改根据provinceId查询市信息
        getNameByPidCityEdit () {
            axios.get('http://127.0.0.1:8082/area/getNameByPid?pId=' + this.tourNoteForm.provinceId).then(res => {
            this.cityss = res.data.obj
            })
        },
        // 根据pid查询省信息
        getNameByPidMoren () {
         this.pId = 0
            axios.get('http://127.0.0.1:8082/area/getNameByPid?pId=' + this.pId).then(res => {
                this.provincess = res.data.obj
            })
        },
		 // 展示旅游足迹根据游玩景区
        getScenicListByOrder () {
            var id = window.sessionStorage.getItem('id')
            this.$axios.get('http://127.0.0.1:8082/scenic/getScenicListByOrder?id=' + id).then(res => {
                console.log(res.data.obj)
            })
        },
		// 修改游记详情信息
		ediTraveNotesById () {
			var formdata = new FormData()
			formdata.set('id', this.tourNoteForm.id)
			formdata.set('title', this.tourNoteForm.title)
			formdata.set('textContent', this.tourNoteForm.textContent)
			formdata.set('avatarId', this.userAvatarId)
            formdata.set('cityId', this.tourNoteForm.cityId)
			formdata.set('provinceId', this.tourNoteForm.provinceId)
			console.log(this.imageFile.name)
			if (this.imageFile.name !== 'File') {
				formdata.set('file', this.imageFile, this.imageFile.name)
			}
			axios.put('http://127.0.0.1:8082/tourNote/updateTourNoteById', formdata).then((res) => {
				if (res.data.obj > 0) {
					this.message('恭喜你，修改数据成功！', 'success')
					this.dialogFormVisibleEdit = false
					this.getTourNoteAlls() // 重新渲染数据列表
					this.imageUrl = ''
					this.imageFile = File
				} else {
					this.message('对不起，修改失败！', 'warning')
				}
			})
		},
		// 打开修改弹窗方法
		tourNoteEdit (row) {
            this.getNameByPidCityEdit()
			this.dialogFormVisibleEdit = true
            this.tourNoteForm = row
			this.imageUrl = 'http://127.0.0.1:8082/getImageById?id=' + row.coverId
		},
		// 获取游记详细数据
		getTourNoteAlls () {
			this.userId = window.sessionStorage.getItem('id')
			axios.get('http://127.0.0.1:8082/tourNote/getTourNoteAlls?userId=' + this.userId).then((res) => {
				this.TraveNotesData = res.data.obj
			})
		},
		// 删除游记信息
		deleteTourNoteById (row) {
		this.$confirm(
			'此操作将删除游记信息，是否继续操作？',
			'提示',
			{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
			} // 删除提示框
		)
			.then(() => {
			axios
				.delete('http://127.0.0.1:8082/tourNote/deleteTourNoteById?id=' + row)
				.then((res) => {
				if (res.data.obj > 0) {
					this.message('删除成功', 'success')
					this.getTourNoteAlls()
				} else {
					this.message('删除失败', 'warning')
				}
				})
			})
			.catch(() => {
			this.$message({
				type: 'info',
				message: '已取消删除'
			})
			})
		},

        // 点击写游记触发方法
        writeTourNote () {
            this.$router.push({name: 'TourNote'})
        },
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        // 地图渲染 (lzy)
        MapShow () {
            let that = this
            if (document.getElementById('my_home_page_map')) {
                const that = this
                const map = this.$L.map('my_home_page_map', {
                center: [34.161818, 108.767477], // 中心位置
                zoom: 2, // 缩放等级
                attributionControl: true, // 版权控件
                zoomControl: true // 缩放控件
                })
                
                this.map = map

                var LeafIcon = this.$L.Icon.extend({
                options: {
                    iconSize: [25, 41], // 图标宽高
                    iconAnchor: [13, 38], // 图标锚点
                    shadowAnchor: [4, 62], // 阴影锚点
                    popupAnchor: [0, -40] // 弹出框弹出位置，相对于图标锚点
                }
                })

                // 创建多个icon
                var greenIcon = new LeafIcon({
                iconUrl: icon
                })

                this.greenIcon = greenIcon

                this.map = map // data上需要挂载
                this.$L.tileLayer(
                'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
                , { minZoom: 4 }).addTo(map) // 加载底图
                // 给地图绑定事件
                this.map.on('click', function () {
                })
            } else {
                // alert(1)
            }
        },
        MyTrend(){
            this.dialogMyTrend=true
            this.dialogNetizenTrends=false
        },
        NetizenTrends(){
            this.dialogMyTrend=false
            this.dialogNetizenTrends=true
        },
		// 上传图片前的校验
		beforeAvatarUpload(file) {
			const isPNG = file.type === 'image/png'
			const isJPG = file.type === 'image/jpg'
			const isJPEG = file.type === 'image/jpeg'
			const isLt2M = file.size / 1024 / 1024 < 2;
			if (!isJPG && !isPNG && !isJPEG) {
				this.$message.error('上传封面图只能是 JPG/PNG/JPGE 格式!');
			}
			if (!isLt2M) {
				this.$message.error('上传封面图大小不能超过 2MB!');
			}
			this.imageUrl = URL.createObjectURL(file)
			this.imageFile = file
			return false
		},
		// 图片上传后的方法
		handleAvatarSuccess(res, file) {
			this.imageUrl = URL.createObjectURL(file.raw);
		},
		// 提示消息
		message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		}
    },
}
</script>

<style scoped>
#my_home_page_map {
    width: 100%;
    height: 560px;
}
.my_home_page_div1{
    margin:0 auto;
    width:1200px;
    height:800px;
}
.item1:hover{
    border-bottom: 2px solid #409EFF;
    color: #303133;
}
.myHomePage_div2{
    width:1200px;
    height:300px;
}
.myHome_img1{
    width:1200px;
    float:left;
}
.myHome_img2{
    width:150px;
    height:150px;
    margin-top:-60px;
    margin-left:20px;
    float:left;
}
.myHome_div3{
    width:1000px;
    height:100px;
    float:left;
    margin-left:20px;
    margin-top:14px;
}
.myHomePage_p1{
    font-size:20px;
    font-weight: bold;
    float:left;
    width:800px;
}
.myHomePage_span1{
    font-size:12px;
    margin-left:15px;
    float:left;
    margin-top:20px;
}
.myHomePage_span2{
    font-size:12px;
    margin-left:15px;
    color:#409EFF;
    float:left;
    margin-top:20px;
    width:100px;
}
.router-link-active {
  text-decoration: none;
}
.myHomePage_p2{
    font-size:14px;
    color:#3c77b3;
    margin-top:10px;
    width:100px;
    float:left;
}
.myHomePage_p3{
    font-size:14px;
    color:#3c77b3;
    margin-top:10px;
    width:100px;
    float:left;
}
.myHome_div3{
    width:300px;
    height:100px;
    float:left;
}
.myHome_div5{
    width:100px;
    height:100px;
    margin-left:600px;
    float:left;
}
.myHomePage_span3{
     color:#3c77b3;
     font-weight:bold;
     font-size:30px;
     margin-top:20px;
     width:30px;
     float: left;
     margin-right:20px;
     margin-left:20px;
}
.myHomePage_span4{
     color:#3c77b3;
     font-weight:bold;
     font-size:30px;
     margin-top:20px;
     width:30px;
     float: left;
}
.myHomePage_p4{
    float:left;
    margin-left:16px;
    font-size:12px;

}
.myHomePage_p5{
    float:left;
    margin-left:26px;
    font-size:12px;

}
.myHomePage_div6{
    width:1200px;
    height:100%;
    margin-top:30px;
}
.myHomePage_div7{
    width:900px;
    height:100%;
    float:left;
    margin-top:50px;
}
.myHomePage_div8{
     width:280px;
    height:400px;
    margin-left:20px;
    float:left;
}
.myHomePage_div9{
    width:280px;
    height:160px;
}
.myHomePage_div10{
    width:280px;
    height:80px;
    margin-top:20px;
}
.failureReason_dialog{
    text-align: center;
    margin: 0;
}
</style>